<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input  style="width: 200px;"   v-model="query.caseNumber" placeholder="立案号" class="filter-item"  ></el-input>
      <el-input  style="width: 200px;"   v-model="query.baoXianName" placeholder="被保险人" class="filter-item"  ></el-input>
      <el-input  style="width: 200px;"   v-model="query.carNumber" placeholder="车牌号" class="filter-item"  ></el-input>
      <el-input type="number" style="width: 120px;"   v-model="query.dingSunPrice[0]" placeholder="定损金额" class="filter-item"  ></el-input>
      <span> - </span>
      <el-input type="number" style="width: 120px;"   v-model="query.dingSunPrice[1]" placeholder="定损金额" class="filter-item"  ></el-input>



      <br/>
      <el-date-picker class="filter-item"
        v-model="query.chuXianDate"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="出险时间"
        end-placeholder="出险时间"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker>
      <el-date-picker class="filter-item"
        v-model="query.createdAt"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="创建时间"
        end-placeholder="创建时间"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker>



      <el-button @click="getRecords" type="primary" class="filter-item">查询</el-button>
      <el-button @click="reload" type="primary" class="filter-item">刷新</el-button>
      <el-button @click="batchPass" type="primary" class="filter-item">批量通过</el-button>


    </div>


    <el-table v-loading="listLoading"	:data="list"	element-loading-text="Loading"	border	fit	highlight-current-row
              @selection-change="handleSelectionChange" v-horizontal-scroll="'always'"
    >
       <el-table-column type="selection" width="55" />
<!--       <el-table-column type="index" label="序列" width="50" /> -->
      <el-table-column prop="id" label="ID" width="50" />
      <el-table-column prop="ocr_reason" label="识别对比结果" width="200" >

        <template v-if="scope.row.ocr_reason" slot-scope="scope">
            <div v-for="(item,index) in scope.row.ocr_reason.split(' | ')">{{item}}</div>
        </template>

      </el-table-column>
      <el-table-column prop="reason" label="理赔单对比结果" width="200" >

        <template v-if="scope.row.reason" slot-scope="scope">
          <div v-for="(item,index) in scope.row.reason.split(' | ')">{{item}}</div>
        </template>

      </el-table-column>
      <el-table-column prop="case_number" label="立案号" width="190" />
      <el-table-column prop="chu_xian_date" label="出险日期" width="160" />
      <el-table-column prop="bao_xian_name" label="被保险人" width="100" />
      <el-table-column prop="car_number" label="车牌号" width="120" />
      <el-table-column prop="car_jia_number" label="车架号" width="180" />
      <el-table-column prop="car_jia_number_of_cheng_bao" label="车架号（承保）" width="180" />
      <el-table-column prop="ding_sun_price" label="定损金额" width="120" />
      <el-table-column prop="bank_account_name" label="收款户名" width="160" />
      <el-table-column prop="bank_type" label="收款银行" width="160" />
      <el-table-column prop="bank_card" label="收款账号" width="160" />
      <el-table-column prop="status_name" label="状态" width="120" />
      <el-table-column prop="created_at" label="创建时间" width="160" />
      <el-table-column prop="ding_sun_url" label="定损单" width="120" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="preview(scope.row.ding_sun_url)">预览</el-button>
          <el-button size="mini" type="text" @click="download(scope.row,'dingsun')">下载</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="cancel_case_url" label="销案证明" width="120" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="preview(scope.row.cancel_case_url)">预览</el-button>
          <el-button size="mini" type="text" @click="download(scope.row,'cancelcase')">下载</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="img_urls" label="车损照片" width="120" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="cheSun(scope.row,'img_urls')">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="repaired_urls" label="修复照片" width="120" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="cheSun(scope.row,'repaired_urls')">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="130">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="getDetail(scope.row)">详情</el-button>
          <el-button size="mini" type="text" @click="pass(scope.row)">通过</el-button>
          <el-button size="mini" type="text" @click="notPass(scope.row)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[10, 20, 100, 200]"
      :page-size="pagination.pageSize"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>

    <el-dialog title="图片" :visible.sync="dialogTableVisible">
      <el-image v-for="(url,index) in srcList"
        style="width: 200px; height: 200px"
        :src="url"
        :preview-src-list="srcList">
      </el-image>
    </el-dialog>

    <el-dialog title="详情" :visible.sync="detailDialogFormVisible" >
      <el-form >

        <el-form-item  label="识别结果对比" :label-width="'120px'">
          <span>{{detail.ocr_reason}}</span>
        </el-form-item>
        <el-form-item  label="理赔结果对比" :label-width="'120px'">
          <span>{{detail.reason}}</span>
        </el-form-item>

        <el-form-item label="立案号" :label-width="'120px'">
          <el-input :value="detail.case_number" ></el-input>
        </el-form-item>
        <el-form-item label="出险日期" :label-width="'120px'">
          <el-input :value="detail.chu_xian_date" ></el-input>
        </el-form-item>
        <el-form-item label="被保险人" :label-width="'120px'">
          <el-input :value="detail.bao_xian_name" ></el-input>
        </el-form-item>
        <el-form-item label="车牌号" :label-width="'120px'">
          <el-input :value="detail.car_number" ></el-input>
        </el-form-item>
        <el-form-item label="车架号" :label-width="'120px'">
          <el-input :value="detail.car_jia_number" ></el-input>
        </el-form-item>
        <el-form-item label="定损金额" :label-width="'120px'">
          <el-input :value="detail.ding_sun_price" ></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="'120px'">
          <el-input :value="detail.status_name" ></el-input>
        </el-form-item>
        <el-form-item label="收款户名" :label-width="'120px'">
          <el-input :value="detail.bank_account_name" ></el-input>
        </el-form-item>
        <el-form-item label="收款账号" :label-width="'120px'">
          <el-input :value="detail.bank_type" ></el-input>
        </el-form-item>
        <el-form-item label="收款银行" :label-width="'120px'">
          <el-input :value="detail.bank_card" ></el-input>
        </el-form-item>

        <el-form-item v-if="detail.ding_sun_url" label="定损单" :label-width="'120px'">
          <el-button size="mini" type="text" @click="preview(detail.ding_sun_url)">预览</el-button>
          <el-button size="mini" type="text" @click="download(detail,'ding_sun')">下载</el-button>
        </el-form-item>
        <el-form-item v-if="detail.cancel_case_url" label="销案证明" :label-width="'120px'">
          <el-button size="mini" type="text" @click="preview(detail.cancel_case_url)">预览</el-button>
          <el-button size="mini" type="text" @click="download(detail,'cancelcase')">下载</el-button>
        </el-form-item>
        <el-form-item v-if="detail.img_urls" label="汽车破损图片" :label-width="'120px'">
          <el-image v-for="(url,index) in imgUrlsSrcList"
                    style="width: 100px; height: 100px"
                    :src="url"
                    :preview-src-list="imgUrlsSrcList">
          </el-image>
        </el-form-item>
        <el-form-item v-if="detail.repaired_urls" label="汽车被修复的照片" :label-width="'120px'">
          <el-image v-for="(url,index) in repairedUrlsSrcList"
                    style="width: 100px; height: 100px"
                    :src="url"
                    :preview-src-list="repairedUrlsSrcList">
          </el-image>
        </el-form-item>
        <el-form-item v-if="detail.qianzi_url" label="客户签字" :label-width="'120px'">
          <el-button size="mini" type="text" @click="preview(detail.qianzi_url)">预览</el-button>
          <el-button size="mini" type="text" @click="download(detail,'qianzi')">下载</el-button>
        </el-form-item>
        <el-form-item v-if="detail.invoice_url" label="电子发票" :label-width="'120px'">
          <el-button size="mini" type="text" @click="preview(detail.invoice_url)">预览</el-button>
          <el-button size="mini" type="text" @click="download(detail,'invoice')">下载</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>


  </div>

</template>

<script>
import { myGet } from '@/utils/myRequest'
import { exportXls } from '@/utils/myUtils'

const urlLst = '/guard/order/index';
const urlPass = '/guard/order/repayPass';
const urlNotPass = '/guard/order/repayNotPass';
const urlDownload = '/guard/download';
export default {

  data(){
    return {
      imgUrlsSrcList:[],
      repairedUrlsSrcList:[],
      dialogTableVisible:false,
      detailDialogFormVisible:false,
      list:[],
      host:process.env.VUE_APP_HOST,
      listLoading:false,
      selectAll:[],
      srcList:[],
      detail:{},
      query:{
        status:2,
        caseNumber: '',
        baoXianName:'',
        baoxianNumber:'',
        carNumber:'',
        chuXianDate:[],
        dingSunPrice:['',''],
        createdAt:[],
      },
      pagination:{
        total:0,
        page:1,
        pageSize:20,
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },

  methods:{
    getDetail(row){
      this.detailDialogFormVisible = true
      this.detail = row
      this.imgUrlsSrcList = []
      this.repairedUrlsSrcList = []

      if(row.img_urls!==null){
        row.img_urls.split(',').forEach(item=>{
          this.imgUrlsSrcList.push(this.host+item)
        })
      }
      if(row.repaired_urls!==null){
        row.repaired_urls.split(',').forEach(item=>{
          this.repairedUrlsSrcList.push(this.host+item)
        })
      }
    },

    reload(){
      Object.assign(this.$data.query,this.$options.data().query)
      Object.assign(this.$data.pagination,this.$options.data().pagination)
      this.getRecords()
    },
    getRecords(){
      this.listLoading = true;
      let params = Object.assign(this.query,this.pagination)
      myGet(urlLst,params).then((res) =>{
        this.listLoading = false;
        if(res.status){
          this.list = res.data.records
          this.pagination.total = res.data.total
        }
      })
    },
    pass( row) {
      this.$confirm('确定通过吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let id = row.id
        myGet(urlPass, { id }).then(res => {
          if (res.status) {
            this.$message.success(res.msg);
            this.reload();
          }
        })
      })
    },

    batchPass(){
      this.$confirm('确定通过吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let id = this.selectAll;
        myGet(urlPass, { id }).then(res => {
          if (res.status) {
            this.$message.success(res.msg);
            this.reload();
          }
        })
      })
    },
    preview(source){
      const url = this.host+source
      window.open(url)
    },
    download(row,type){
      const url = urlDownload+"?type="+type+"&id="+row.id
      exportXls(url)
    },

    cheSun(row,type){
      this.dialogTableVisible = true
      this.srcList = [];

      if(type=='repaired_urls'){
        row.repaired_urls.split(',').forEach(item=>{
          this.srcList.push(this.host+item)
        })
      }else{
        row.img_urls.split(',').forEach(item=>{
          this.srcList.push(this.host+item)
        })
      }
    },
    handleSelectionChange(val){
      this.selectAll = []
      val.forEach(element => {
        this.selectAll.push(element.id)
      });
    },


    notPass( row) {
      const id = row.id
        this.$prompt('请输入拒绝理由', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputErrorMessage: '请输入拒绝理由',
          inputValidator: (value) => {
            if(!value) {
              return '请输入拒绝理由不能为空！';
            }
          },
        }).then(({ value }) => {
          myGet(urlNotPass+"?id="+id+"&reason="+value).then(res=>{
            if(res.status){
              this.reload()
            }
          })
        })
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.page = 1
      this.getRecords()
    },
    handleCurrentChange(val) {
      this.pagination.page = val
      this.getRecords();
    },
  },
  mounted() {
    this.getRecords()


  }

}
</script>

<style scoped>

</style>
